<template>
  <Vue3DraggableResizable
    @drag-end="handleDragStop"
    @contextmenu.stop="onContextMenuChild($event)"
    @mousedown="preventDefaultDrag"
    :w="getDraggableNumber(props.info.width)"
    :h="getExhibitsHeightRest(props.info.height)"
    :x="props.info.x ? getDraggableNumber(props.info.x) : getParentX(props.index)"
    :y="getExhibitsHeightRest(props.info.y)"
    classNameDragging="draggingChild"
    :draggable="getdraggableDisabled(route.meta.loopType, true)"
    :resizable="getdraggableDisabled(route.meta.loopType, true)"
    @drag-start="store.setHistoryListItem()"
    @resize-start="store.setHistoryListItem()"
    @resizing="resizing"
    @resize-end="resizeEnd"
    @dragging="dragging"
    :parent="true"
  >
    <!-- @dragging="dragging"  -->
    <div
      class="exhibits-img border-hover-style"
      :style="{ width: props.info.width + 'rem', height: props.info.height + 'rem' }"
    >
      <t-loading size="small" :loading="loading">
        <img
          @click="openExhibitModeShow(props.info.id, props.info.moduleId, route.meta.loopType)"
          v-if="props.info.mattingUrl"
          :style="{ width: props.info.width - 0.2 + 'rem', height: props.info.height - 0.2 + 'rem' }"
          v-lazy="urls + props.info.mattingUrl + '?imageView2/0/w/600/format/webp'"
          alt=""
        />
        <img
          @click="openExhibitModeShow(props.info.id, props.info.moduleId, route.meta.loopType)"
          v-else
          :style="{ width: props.info.width - 0.2 + 'rem', height: props.info.height - 0.2 + 'rem' }"
          v-lazy="getLinkUrl(props.info.coverUrl, '?imageView2/0/format/webp')"
          alt=""
        />
      </t-loading>
      <!-- <div class="mp-box">{{ props.info.name }}</div> -->
      <img
        class="flower-btn"
        @click="openExhibitModeShow(props.info.id, props.info.moduleId, route.meta.loopType)"
        v-lazy="publicUrls + 'free/style1/flower.png?imageView2/format/webp'"
      />
    </div>
    <exhibitsFlotMenu
      @emitLoadingShow="emitLoadingShow"
      :itemId="props.info.id"
      :childId="props.childId"
      :indexs="props.parentIndex"
      :contextmenuExhibitId="props.index"
      :materialType="5"
      :AuxiliaryId="(props.AuxiliaryId || props.AuxiliaryId === 0) && props.AuxiliaryId !== -1 ? props.AuxiliaryId : -1"
      :isCut="true"
    />
  </Vue3DraggableResizable>
  <!-- https://static-1316349889.cos.ap-shanghai.myqcloud.com/door/435275535786053.webp -->
</template>            
   
<script setup lang="ts">
import { urls, getLinkUrl } from '@/utils/request/upload';
import exhibitsFlotMenu from '@/components/flotMenu/exhibits.vue';
import ContextMenu from '@imengyu/vue3-context-menu';
import { getDraggableNumber, getExhibitsHeightRest } from '@/utils/getRemComputed';
import { ref, reactive } from 'vue';
import { exbitMenuShow } from '@/hooks/menuHooks';
import { openExhibitModeShow } from '@/hooks/index';
import { useProjectStore } from '@/store';
import { getdraggableDisabled, publicUrls } from '@/utils/minxin';
import { useRoute } from 'vue-router';

const loading = ref(false);
const timer = ref();
const route = useRoute();
const emit = defineEmits(['emitChildDraggableStyle', 'emitChildDraggable']);
const store = useProjectStore();
const contextMenuTrigger = ref();
const parentLock = ref(true);
const flag = ref(false);
const props = defineProps({
  selectInfo: {
    type: Object,
  },
  parentId: {
    type: Number,
  },
  info: {
    type: Object,
  },
  index: {
    type: Number,
  },
  list: {
    type: Object,
  },
  childId: {
    type: Number,
  },
  parentIndex: {
    type: Number,
  },
});
const emitLoadingShow = (show: boolean) => {
  loading.value = show;
};
const dragging = (draggingInfo: any) => {
  clearTimeout(timer.value);
  timer.value = setTimeout(() => {
    emit('emitChildDraggable', draggingInfo, props.index); //传递当前展品图距离相对父元素的xy偏移量变化
  }, 200);
};
const resizing = (draggingInfo: any) => {
  clearTimeout(timer.value);
  timer.value = setTimeout(() => {
    emit('emitChildDraggableStyle', draggingInfo, props.index); //设置当前展品图距离相对父元素的宽高变化
  }, 200);
  // emit('emitDraggable', props.indexs, draggingInfo);
};
const resizeEnd = (draggingInfo: any) => {
  // emit('emitDraggable', props.indexs, draggingInfo);

  setTimeout(() => {
    emit('emitChildDraggableStyle', draggingInfo, props.index); //设置当前展品图距离相对父元素的宽高变化
    store.SaveFreeInfoData();
  }, 200);
};
const handleDragStop = (draggingInfo: any) => {
  setTimeout(() => {
    store.SaveFreeInfoData();
  }, 200);
};
const preventDefaultDrag = (event) => {
  if (route.meta.loopType) {
  } else {
    event.stopPropagation();
  }
};
const onContextMenuChild = (e: any) => {
  // console.log(props.childId, props.parentIndex, props.index);

  // console.log('11110')
  e.preventDefault();

  if (route.meta.loopType) {
    return;
  }
  store.contextmenuchildId = props.childId;
  store.contextmenuGroupId = props.parentIndex;
  store.contextmenuExhibitId = props.index;
  exbitMenuShow(e, props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1);
};
const getParentX = (indexs: number) => {
  let x = 0;
  for (let index = 0; index < indexs; index++) {
    // const element = array[index];
    x = x + props.list[index].width;
  }
  let ParentX = getDraggableNumber(x);
  // console.log(ParentX);
  return ParentX;
};
</script>             
 
<style lang="less" scoped>
.exhibits-img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  // position: absolute;
  z-index: 66;
  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    // transform: perspective(500px) rotateX(22deg); /* 沿X轴旋转 */
    // transform: perspective(700px) rotateX(0deg) rotateX(22deg) scale3d(1, 1, 1)
    // box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }
  .flower-btn {
    width: 40px;
    height: 40px;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: flower 2s linear infinite;
    @keyframes flower {
      0% {
        opacity: 0;
      }
      40% {
        opacity: 80%;
      }
      80% {
        opacity: 80%;
      }
      100% {
        opacity: 0;
      }
    }
  }
}
.active {
  z-index: 999;
}
:deep(.vdr-container) {
  z-index: 6;
}
.mp-box {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  width: 100%;
  max-width: 225px;
  height: 60px;
  background: rgba(188, 174, 162, 0.2);

  line-height: 60px;
  text-align: center;
  padding: 0 10px;
  font-family: SourceHanSerifCN-Bold;
  color: rgba(254, 243, 223, 1);
  font-size: 18px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
.active {
  :deep(.flot-menu-ex) {
    display: flex;
  }
}
</style>